<template>
    <div class="Personality">
        <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item v-for="picUrl in picUrl" :key="picUrl">
                <h3 class="medium">
                    <img :src="picUrl">
                </h3>
            </el-carousel-item>
        </el-carousel>
        <div class="box" v-for="{id,title} in LiArr" :key="id">
            <component :is="title"></component>
        </div>
        <div class="change">
            <p>已经到底啦~</p>
            <p>现在可以根据个人喜好,自由调整首页栏目序列啦~</p>
            <p>
                <button @click="changeRank">调整栏目顺序</button>
            </p>
        </div>
        <div class="Rank" v-show="show">
            <i  @click="changeRank" class="fa fa-close"></i>
            <h3>调整节目顺序</h3>
            <p>想调整首页栏目的顺序？按住右边的按钮拖动即可</p>
            <ul>
                <draggable v-model="NewArr" group= "name" dragClass="drag" chosenClass="chosen" forceFallback="true" animation="300" @start="onStart" @end="onEnd">
                    <transition-group>
                            <li v-for="{id,text} in NewArr" :key="id" :id="id">
                                <a>{{text}}</a>
                                <i class="fa fa-list-ul"></i>
                            </li>
                    </transition-group>
                </draggable>
            </ul>
            <div>
                <p><a @click="retrun">恢复默认排序</a></p>
                <p>
                    <button type="submit" @click="yes">确定</button>
                    <button  @click="changeRank">取消</button>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
import {homepage} from '@/library/api/api'
import RecommendSongs from '@/components/com/Personality/RecommendSongs/RecommendSongs.vue'
import PopBlog from '@/components/com/Personality/PopBlog/PopBlog.vue'
import ExDeliveryCom from '@/components/com/Personality/ExDelivery/ExDeliveryCom.vue'
import NewMusicCom from '@/components/com/Personality/NewMusic/NewMusicCom.vue'
import TopicBlogCom from '@/components/com/Personality/TopicBlogCom/TopicBlogCom.vue'
import RecomMVCom from '@/components/com/Personality/RecomMVCom/RecomMVCom.vue'
import Listen from '@/components/com/Personality/ListenAndWatch/Listen.vue'
import Watch from '@/components/com/Personality/ListenAndWatch/Watch.vue'
import draggable from 'vuedraggable'
export default {
    name:'Personality',
    data() {
        return {
            picUrl:{},
            show:false,
            LiArr:[
                {
                    id:1,
                    text:"推荐歌单",
                    title:"RecommendSongs"
                },
                {
                    id:2,
                    text:"博客",
                    title:"PopBlog"
                },
                {
                    id:3,
                    text:"独家放送",
                    title:"ExDeliveryCom"
                },
                {
                    id:4,
                    text:"最新音乐",
                    title:"NewMusicCom"
                },
                {
                    id:5,
                    text:"主题博客",
                    title:"TopicBlogCom"
                },
                {
                    id:6,
                    text:"推荐MV",
                    title:"RecomMVCom"
                },
                {
                    id:7,
                    text:"听听",
                    title:"Listen"
                },
                {
                    id:8,
                    text:"看看",
                    title:"Watch"
                },
            ],
            NewArr:[]
        }
    },
    components: {
        RecommendSongs,
        PopBlog,
        ExDeliveryCom,
        NewMusicCom,
        TopicBlogCom,
        RecomMVCom,
        Listen,
        Watch,
        draggable
    },
    methods: {
        changeRank() {
            this.NewArr = this.LiArr
            this.show = !this.show
            return this.show,this.NewArr
        },

        //开始拖拽事件
        onStart(){
            this.drag=true  
        },
        //拖拽结束事件
        onEnd() {
            this.drag=false
        },

        yes() {
            this.LiArr = this.NewArr
            this.show = !this.show
            return this.LiArr
        },

        retrun() {
            this.NewArr.sort(function(a,b){
                return (a.id-b.id)
            })
        }
    },
    created() {
        homepage({})
        .then(res=>{
            // console.log(res.data.blocks);
            this.picUrl = res.data.blocks[0].extInfo.banners.map(item=>{
                return item.pic
            })
        })
    },
}
</script>

<style lang="scss" scoped>
@import './Personality.scss'
</style>
